import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:zootix/constants/zt_dart.dart';
import 'package:zootix/models/zt_park_detail_comment.model.dart';
import 'package:zootix/screens/park/zt_park_detail/zt_park_detail.controller.dart';
import 'package:zootix/store/zt_auth.store.dart';
import 'package:zootix/util/zt_screen_adaper_util.dart';
import 'package:zootix/util/zt_snack_bar.util.dart';
import 'package:zootix/widgets/zt_translate_btn.dart';
import 'package:zootix/zt_app_theme.dart';
import 'package:uuid/uuid.dart';

class ZtParkDetail extends StatelessWidget {
  final _controller = Get.put<ZtParkDetailController>(ZtParkDetailController());
  late String title;
  final Color unActiveColor = const Color(0xFFCCCCCC);
  final Color activeColor = const Color(0xFFB0F320);

  ZtParkDetail({super.key}) {
    title = Get.arguments['title']!;
    _controller.parkType = title.toLowerCase();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFFFFFF),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Obx(() => _controller.parkDetail.value == null
        ? SizedBox()
        : Column(
            children: [
              Stack(
                children: [
                  _buildBanner(),
                  Positioned(top: 0, child: _buildBackBtn()),
                  Positioned(
                      top: ZtScreenAdaper.height(30),
                      left: 0,
                      right: 0,
                      child: _buildTitle()),
                  Positioned(
                    bottom: 0,
                    child: _buildBannerPagination(),
                  )
                ],
              ),
              Expanded(child: _buildComments())
            ],
          ));
  }

  Widget _buildTitle() {
    return SafeArea(
        child: Container(
      alignment: Alignment.center,
      child: Text(
        '$title Park',
        textAlign: TextAlign.center,
        style: TextStyle(
            color: ZtAppTheme.white,
            fontSize: ZtScreenAdaper.sp(25),
            fontWeight: FontWeight.w500),
      ),
    ));
  }

  Widget _buildBackBtn() {
    return SafeArea(
      child: Container(
        padding: EdgeInsets.symmetric(
            vertical: ZtScreenAdaper.height(40),
            horizontal: ZtScreenAdaper.width(20)),
        child: InkWell(
          onTap: () {
            Get.back();
          },
          child: const Icon(
            Icons.arrow_back_ios,
            color: ZtAppTheme.white,
          ),
        ),
      ),
    );
  }

  Widget _buildBannerPagination() {
    return Container(
        height: ZtScreenAdaper.height(30),
        width: ZtScreenAdaper.screenWidth(),
        decoration: BoxDecoration(
            border: Border.all(
              color: const Color(0xFFFFFFFF),
            ),
            color: const Color(0xFFFFFFFF),
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(ZtScreenAdaper.sp(15)),
                topLeft: Radius.circular(ZtScreenAdaper.sp(15)))),
        child: Obx(() => Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(
                int.parse(
                    _controller.parkDetail.value!['bannerCount']! as String),
                (index) => InkWell(
                    onTap: () {
                      _controller.swipeController.move(index);
                    },
                    child: Container(
                      margin: EdgeInsets.symmetric(
                          horizontal: ZtScreenAdaper.width(3)),
                      height: ZtScreenAdaper.height(8),
                      width: ZtScreenAdaper.width(30),
                      decoration: BoxDecoration(
                          color: _controller.selectedTabIndex.value == index
                              ? activeColor
                              : unActiveColor,
                          borderRadius:
                              BorderRadius.circular(ZtScreenAdaper.sp(2))),
                    ))))));
  }

  Widget _buildBanner() {
    return Container(
        height: ZtScreenAdaper.height(350),
        child: GetBuilder(
          init: _controller,
          builder: (_) {
            return Swiper(
                controller: _controller.swipeController,
                onIndexChanged: (index) =>
                    {_controller.selectedTabIndex.value = index},
                itemBuilder: (BuildContext context, int index) {
                  return Image(
                    image: AssetImage(
                        'assets/images/${title.toLowerCase()}_detail_banner${index + 1}.jpg'),
                    fit: BoxFit.cover,
                  );
                },
                itemCount: int.parse(
                    _controller.parkDetail.value!['bannerCount']! as String));
          },
        ));
  }

  Widget _buildComments() {
    return Stack(
      children: [
        SingleChildScrollView(
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: ZtScreenAdaper.width(10)),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(ZtScreenAdaper.sp(5)),
                color: const Color(0xFFFAFAFA)),
            child: Obx(() => Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(
                          horizontal: ZtScreenAdaper.width(10)),
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              _controller.parkDetail.value!['title']! as String,
                              style: TextStyle(
                                  fontSize: ZtScreenAdaper.sp(18),
                                  fontWeight: FontWeight.bold),
                            ),
                            SizedBox(
                              height: ZtScreenAdaper.height(15),
                            ),
                            Text(
                              _controller.parkDetail.value!['content']!
                                  as String,
                              style: TextStyle(fontSize: ZtScreenAdaper.sp(14)),
                            ),
                            SizedBox(
                              height: ZtScreenAdaper.height(15),
                            ),
                            if (_controller.translatedText.isEmpty)
                              Row(
                                children: [
                                  Spacer(),
                                  _controller.isTranslating.value
                                      ? const CupertinoActivityIndicator()
                                      : ZtTranslateBtn(callback: () {
                                          _controller.translateMessage();
                                        })
                                ],
                              )
                          ]),
                    ),
                    ..._controller.comments
                        .map((comment) => Container(
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        color: const Color(0xFFCCCCCC),
                                        width: ZtScreenAdaper.sp(1)))),
                            padding: EdgeInsets.symmetric(
                                vertical: ZtScreenAdaper.height(10),
                                horizontal: ZtScreenAdaper.width(10)),
                            child: Column(
                              children: [
                                SizedBox(
                                  height: ZtScreenAdaper.height(10),
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    SizedBox(
                                        width: ZtScreenAdaper.width(40),
                                        height: ZtScreenAdaper.width(40),
                                        child: CircleAvatar(
                                          radius: 50,
                                          backgroundImage: NetworkImage(
                                              comment.avatar ?? ''),
                                        )),
                                    SizedBox(
                                      width: ZtScreenAdaper.width(10),
                                    ),
                                    Expanded(
                                        child: Text(
                                      '${comment.nickName}',
                                      style: TextStyle(
                                          fontSize: ZtScreenAdaper.sp(16),
                                          fontWeight: FontWeight.w500),
                                    )),
                                    InkWell(
                                      onTap: () {
                                        _controller.likeComment(comment.id!);
                                      },
                                      child: comment.isLike
                                          ? Icon(
                                              Icons.favorite,
                                              color: Colors.red,
                                            )
                                          : Icon(Icons.favorite_border),
                                    )
                                  ],
                                ),
                                SizedBox(
                                  height: ZtScreenAdaper.height(15),
                                ),
                                Row(
                                  children: [
                                    Expanded(child: Text(comment.content ?? ''))
                                  ],
                                )
                              ],
                            )))
                        .toList(),
                    SizedBox(
                      height: ZtScreenAdaper.height(60),
                    )
                  ],
                )),
          ),
        ),
        _buildSearchBar(),
      ],
    );
  }

  Widget _buildSearchBar() {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: ZtScreenAdaper.height(80),
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.3),
              spreadRadius: 2,
              blurRadius: 5,
              offset: Offset(0, -1), // 控制阴影的位置偏移
            ),
          ],
        ),
        padding: EdgeInsets.symmetric(
            horizontal: ZtScreenAdaper.width(15),
            vertical: ZtScreenAdaper.height(15)),
        child: Row(
          children: [
            Expanded(
                child: Stack(
              children: [
                _buildSearchInput(),
                Positioned(
                    width: ZtScreenAdaper.width(40),
                    height: ZtScreenAdaper.width(40),
                    right: 0,
                    child: _buildSubmitBtn())
              ],
            )),
          ],
        ),
      ),
    );
  }

  Widget _buildSearchInput() {
    return ConstrainedBox(
      constraints: BoxConstraints(maxHeight: ZtScreenAdaper.height(40)),
      child: TextField(
        controller: _controller.textEditingController,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(
              left: ZtScreenAdaper.width(10), right: ZtScreenAdaper.width(50)),
          hintText: 'Enter your ideas...',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(ZtScreenAdaper.sp(15)),
                  topRight: Radius.circular(ZtScreenAdaper.sp(30)),
                  bottomLeft: Radius.circular(ZtScreenAdaper.sp(15)),
                  bottomRight: Radius.circular(ZtScreenAdaper.sp(30))),
              borderSide: BorderSide.none),
          filled: true,
        ),
      ),
    );
  }

  Widget _buildSubmitBtn() {
    return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Color(0xFFB0F320),
        ),
        child: InkWell(
          onTap: () async {
            if (_controller.textEditingController.value.text == '') {
              await ZtSnackBarUtil().warning('Please enter your ideas.');
              return;
            }

            await _controller.addComments(ZtParkDetailCommentModel(
                id: const Uuid().v4(),
                parkType: _controller.parkType,
                avatar: ZtAuthStore.to.userInfo.value.avatarThumbUrl,
                nickName: ZtAuthStore.to.userInfo.value.nickname,
                isLike: false,
                content: _controller.textEditingController.value.text));
            await ZtSnackBarUtil().success('Comment successful!');
            await _controller.getComments();
            Get.focusScope?.unfocus();
            _controller.textEditingController.clear();
          },
          child: Icon(
            Icons.arrow_upward,
            size: ZtScreenAdaper.sp(25),
            color: Colors.white,
          ),
        ));
  }
}
